<template>
  <div>
    <Table class="home-table charts-border"
           :columns="colData"
           :data="showTableData"
           :width="725"
           :height="930"
           :max-height="930"
           :highheight-row="highheightRow"
           @on-row-dblclick="showPicture"></Table>
    <VoiceBroadcast ref="voiceBroadcast" />
    <Modal v-model="isShowModal"
           title=""
           :width="modelWidth"
           class-name="vertical-center-modal">
      <p slot="header"
         style="height:30px;line-height:30px;font-size:24px;">
        <span>{{ eventPictureMsg.road_name}}&nbsp;-&nbsp;{{eventPictureMsg.event}}&nbsp;-&nbsp;{{eventPictureMsg.starttime}}</span>
      </p>
      <div style="width:100%;height:100%;">
        <Row style="width:100%;height:100%;"
             v-if="showPeople">
          <i-col span="18"
                 style="height:100%;">
            <img v-if="showImgVideo"
                 style="border:15px solid rgba(0,90,181,0.5)"
                 :src="eventPictureMsg.p_path"
                 width="100%"
                 height="100%" />
            <!-- <Mp4VideoPlayer v-else :src="eventPictureMsg.v_path"></Mp4VideoPlayer> -->
            <video v-else
                   :src="eventPictureMsg.v_path"
                   width="100%"
                   height="100%"
                   autoplay
                   controls
                   ref="videoFlag">
            </video>
          </i-col>
          <i-col span="6">
            <img v-if="showImgVideo"
                 :src="eventPictureMsg.b_p_path"
                 style="border:15px solid rgba(0,90,181,0.5);top:0px;"
                 width="100%"
                 height="100%" />
          </i-col>
        </Row>
        <div v-else>
          <img style="border:15px solid rgba(0,90,181,0.5)"
               v-if="showImgVideo"
               :src="eventPictureMsg.p_path"
               width="100%"
               height="100%" />
          <!-- <Mp4VideoPlayer v-else :src="eventPictureMsg.v_path"></Mp4VideoPlayer> -->
          <video v-else
                 :src="eventPictureMsg.v_path"
                 width="100%"
                 height="100%"
                 autoplay
                 controls
                 ref="videoFlag">
          </video>
        </div>

      </div>
      <div slot="footer">
        <Button type="success"
                size="large"
                @click="showEventPicture(true)">显示图片</Button>
        <Button v-if="eventPictureMsg.v_path!=='' && eventPictureMsg.v_path!=='null'"
                type="warning"
                size="large"
                @click="showEventPicture(false)">播放视频</Button>
        <Button type="error"
                size="large"
                v-if="showControlTime"
                @click="toEventTime">跳转到事件发生处</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
import dayjs from "dayjs";
import { reqEvent } from "@/api";
// import Mp4VideoPlayer from "@/components/myvideo/Mp4VideoPlayer";
import { mapState, mapActions } from "vuex";
import VoiceBroadcast from "./voiceBroadcast";
var node_schedule = require("node-schedule");
export default {
  components: {
    // Mp4VideoPlayer,
    VoiceBroadcast
  },
  data() {
    return {
      height: 400,
      highheightRow: true,
      isShowModal: false,
      showControlTime: false, // 控制进度
      eventDetailData: {},
      newTime: null, //记录上一次获取报警事件的最新时间
      oldTime: null,
      colData: [
        {
          title: "事件截图",
          key: "events_smallpic",
          width: "120",
          align: "center",
          render: (h, params) => {
            return h("img", {
              style: {
                width: "80px",
                height: "60px"
              },
              attrs: {
                src: params.row.p_path
              }
            });
          }
        },
        { title: "报警时间", key: "starttime", width: "205", align: "center" },
        { title: "报警地点", key: "road_name", width: "110", align: "center" },
        {
          title: " ",
          key: "events_typeicon",
          width: "45",
          align: "right",
          render: (h, params) => {
            return h("img", {
              style: {
                width: "28px",
                height: "28px"
              },
              attrs: {
                // src: require(('../../assets/' + params.row.event + '.png'),
                src: require("../../assets/" + params.row.event + ".png")
              }
            });
          }
        },
        { title: "报警类型", key: "event", width: "108", align: "center" },
        {
          title: "事件详情",
          key: "detail",
          width: "120",
          align: "center",
          render: (h, params) => {
            // console.log('params:',params )
            return h(
              "Button",
              {
                props: {
                  type:
                    params.row.video_path === "" ||
                      params.row.video_path === "null"
                      ? "warning"
                      : "success",
                  size: "small"
                },
                style: {
                  marginRight: "5px"
                },
                on: {
                  click: () => {
                    console.log('params:', params)
                    this.eventPictureMsg = params.row
                    this.showPeopleImg()
                    this.isShowModal = true
                    this.showImgVideo = true
                    this.showControlTime = false
                  }
                }
              },
              "查看详情"
            );
          }
        }
      ],
      allMonitorEventList: [],
      NewMonitorEventList: [],
      eventPictureMsg: {},
      showImgVideo: true,
      showPeople: false,
      getEventIndex: 0,
      modelWidth: 1440
    };
  },
  mounted() {
    this.getEventIndex = 0;
    this.getEventTable();
    var intervalEventTabel = node_schedule.scheduleJob("*/10 * * * * *", () => {
      console.log("实时监控页面事件列表实时获取 -------------> 报警事件数据!");
      this.getEventTable();

      // this.getNewEvent()
      // this.popNowMonitorList()
    });
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      console.log(
        "取消 实时监控页面事件列表实时获取 -------------> 报警事件数据"
      );
      intervalEventTabel.cancel();
      // this.NewMonitorEventList = [];
    });
  },
  computed: {
    ...mapState(["monitorData"]),
    showTableData() {
      // this.getNewEvent();
      // this.popNowMonitorList();
      return this.allMonitorEventList.map(ele => {
        // if (ele.event === "反光衣") {
        //   ele.event = "行人入侵"
        // }

        let cellClassName = "";
        if (ele.event === "非法停车") {
          cellClassName = "demo-table-info-cell-stop";
        } else if (ele.event === "行人入侵") {
          cellClassName = "demo-table-info-cell-person";
        } else if (ele.event === "道路缓行") {
          cellClassName = "demo-table-info-cell-slow";
        } else if (ele.event === "道路拥堵") {
          cellClassName = "demo-table-info-cell-jam";
        } else if (ele.event === "车辆逆行") {
          cellClassName = "demo-table-info-cell-back";
        } else if (ele.event === "非机动车") {
          cellClassName = "demo-table-info-cell-nonvehicle";
        }

        ele.cellClassName = {
          road_name: cellClassName,
          //datetime: cellClassName,
          event: cellClassName
          //: cellClassName
        };
        return ele;
      });
      //return eventTable;
    }
  },

  methods: {
    ...mapActions(["setWarnPoint"]),
    async getEventTable() {
      this.getEventIndex = this.getEventIndex + 1;
      let start_time = dayjs()
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      //let road_name = this.monitorData.videoMsg.ch_name
      let params = {
        start_time,
        page_index: 1,
        page_size: 50
      };
      let resData = await reqEvent(params);
      if (resData.code === 6000) {
        this.newTime = resData.data.events[0].starttime; //取第一条（最新一条）的时间
        this.allMonitorEventList = resData.data.events;
        this.setWarnPoint(this.allMonitorEventList);
        // this.newTime =  this.allMonitorEventList[0].starttime //取第一条（最新一条）的时间
        // console.log("allMonitorEventList:"+this.allMonitorEventList)
        // console.log("this.newTime:"+this.newTime)
      }
    },
    async getNewEvent() {
      if (this.getEventIndex == 1) {
        this.oldTime = this.newTime;
      }
      if (this.newTime != this.oldTime && this.getEventIndex != 1) {
        let start_time = this.newTime;
        let event = "行人入侵,车辆逆行";
        let params = {
          start_time,
          event,
          page_index: 1,
          page_size: 50
        };
        // console.log("new_params:",params)
        let resData = await reqEvent(params);
        if (resData.code === 6000) {
          if (resData.data.events.length != 0) {
            this.NewMonitorEventList.push(resData.data.events);
            // this.setWarnPoint(this.allMonitorEventList)
            console.log("NewMonitorEventList:", this.NewMonitorEventList);
          }
        }
        this.oldTime = this.newTime;
      }
    },
    popNowMonitorList() {
      // setTimeout(() => {
      // this.isShowModal = false //把上次显示的销毁
      // console.log("length:",this.NewMonitorEventList.length)
      if (this.NewMonitorEventList.length != 0) {
        // this.showPopPicture()
        //console.log("this.NewMonitorEventList[0]:",this.NewMonitorEventList[0])
        this.showPopPicture(this.NewMonitorEventList[0]);
        //开启语音播报
        this.$refs.voiceBroadcast.playVoice(this.NewMonitorEventList[0]);
        setTimeout(() => {
          this.isShowModal = false; //把上次显示的销毁
          this.NewMonitorEventList.shift();
          this.$refs.voiceBroadcast.stopVoice(); //终止语音播报
          console.log(
            "删除NewMonitorEventList第一个元素后:" + this.NewMonitorEventList
          );
        }, 20000);
      }
      // }, 5000);
    },
    // 是否显示行人入侵截图
    showPeopleImg() {
      if (this.eventPictureMsg.event == "行人入侵") {
        this.modelWidth = 1440
        this.showPeople = true
      } else {
        this.modelWidth = 1080
        this.showPeople = false
      }
    },
    showPicture(row, index) {
      this.eventPictureMsg = this.allMonitorEventList[index]
      this.showPeopleImg()
      this.isShowModal = true
      this.showImgVideo = true
      this.showControlTime = false
    },
    showEventPicture(value) {
      if (value) {
        this.showPeopleImg()
      } else {
        this.modelWidth = 1080
        this.showPeople = false;
      }
      this.showImgVideo = value
      this.showControlTime = !value
    },
    showPopPicture(itemlist) {
      // console.log("itemlist:",itemlist)
      this.eventPictureMsg = itemlist[0];
      this.showPeopleImg()
      this.isShowModal = true;
      this.showImgVideo = true;
    },
    toEventTime() {
      this.$refs.videoFlag.currentTime = 8;
    }
  }
};
</script>

<style lang="less">
@table-background-color: #0a4271 !important;

.home-table {
  opacity: 0.8;
  z-index: 200;
  margin-top: 7.5%;
  margin-left: 4.5%;
}
.home-table .ivu-table {
  color: #fff;
  font-size: 16px;
  background-color: #01237c !important;
  overflow-x: hidden;
  overflow-y: hidden;
}
// 表格字体
.home-table .ivu-table td {
  font-size: 16px;
  font-weight: bold;
}
// 表格头的字体
.home-table .ivu-table th {
  background-color: @table-background-color;
  font-size: 18px;
  font-weight: bold;
  height: 42px;
}
.home-table .ivu-table-wrapper {
  border: 1px solid @table-background-color;
}
.home-table .ivu-table:after {
  background-color: @table-background-color;
}
.home-table .ivu-table td,
.ivu-table th {
  border-bottom: 1px solid @table-background-color;
}
// 停车
.home-table .ivu-table .demo-table-info-cell-stop {
  //color: #0ECC84;
  color: #faad14;
  font-weight: bold;
}
// 行人入侵
.home-table .ivu-table .demo-table-info-cell-person {
  color: #fff566;
  //color: #b798b0; //new
  font-weight: bold;
}
// 车辆慢行
.home-table .ivu-table .demo-table-info-cell-slow {
  color: #5fb4ec;
  font-weight: bold;
}
// 车辆拥堵
.home-table .ivu-table .demo-table-info-cell-jam {
  color: #e9744d;
  //color: #5f2061; //NEW
  font-weight: bold;
}
// 逆行
.home-table .ivu-table .demo-table-info-cell-back {
  color: #bb5e00;
  font-weight: bold;
}
// 非机动车
.home-table .ivu-table .demo-table-info-cell-nonvehicle {
  color: #64a600;
  font-weight: bold;
}
.home-table .ivu-table-row-hover td {
  color: #fff;
  background-color: #104ba3 !important;
  // background-color: #36cfc9 !important;
}
.home-table .ivu-table-row-highlight td {
  background-color: #40a9ff !important;
  // background-color: #36cfc9 !important;
}
// .home-table .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td, .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td{
//   background-color: #3A5683;
// }
.table-detail-xxx .ivu-icon-ios-close {
  font-size: 41px !important;
}
.table-detail-xxx .ivu-modal-body {
  padding: 2px 10px;
}

@table-background-color: #0a4271 !important;

.ivu-table {
  color: #fff !important;
  overflow-x: hidden !important;
  background-color: #01237c !important;
  overflow-y: hidden !important;
}
.ivu-table .demo-table-info-row td {
  font-size: 16px;
}
.ivu-table th {
  background-color: @table-background-color;
  font-size: 16px;
}
.ivu-table .demo-table-error-row td {
  background-color: #ff6600;
  color: #fff;
}
.ivu-table td.demo-table-info-column {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-info-cell-name {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-info-cell-age {
  background-color: #ff6600;
  color: #fff;
}
.ivu-table .demo-table-info-cell-address {
  background-color: #187;
  color: #fff;
}
.ivu-table-wrapper {
  border: 1px solid @table-background-color;
}
.ivu-table:after {
  background-color: @table-background-color;
}
.ivu-table td,
.ivu-table th {
  border-bottom: 1px solid @table-background-color;
}
.ivu-table .demo-table-info-row-legal {
  color: #18b566;
}
.ivu-table .demo-table-info-row-illegal {
  color: #f29100;
}
.ivu-table .demo-table-info-cell-legal {
  color: #18b566;
  font-weight: bold !important;
}
.ivu-table .demo-table-info-cell-illegal {
  color: #f29100;
  font-weight: bold !important;
}
.ivu-page-next,
.ivu-page-prev {
  background-color: #01237c !important;
}
.ivu-page-item {
  background-color: #1081b2 !important;
  color: red !important;
}
.ivu-page-item a {
  color: white !important;
}
.ivu-page-item-active a {
  color: blue !important;
}
.ivu-page-options-elevator input {
  background-color: #1081b2 !important;
  color: #fff !important;
}
.ivu-table td {
  background-color: #01237c !important;
}
.ivu-table-overflowX {
  overflow-x: hidden !important;
}
.ivu-table-tip table td {
  font-size: 16px;
}
.ivu-table-tip {
  overflow: hidden !important;
}

@background-color: #0a4271 !important;
@font-color: #fff !important;

.ivu-form-item-label {
  font-size: 1.6rem !important;
  color: @font-color;
}
.ivu-input {
  border: 1px solid @background-color;
  background-color: @background-color;
  font-size: 14px;
  font-weight: bold;
  color: #fff !important;
}
.ivu-select-selection {
  width: 180px;
  background-color: @background-color;
  border: 1px solid @background-color;
}
.ivu-select-placeholder {
  // color: #fff !important;
  font-size: 14px !important;
  font-weight: bold;
}
.ivu-select-dropdown {
  background-color: @background-color;
  margin: 0px 0px;
}
.ivu-select-item {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: bold;
}
input::-webkit-input-placeholder {
  // color: #fff !important;
  font-size: 14px;
}
.ivu-tabs-bar {
  border-bottom: 2px solid @background-color;
}
.ivu-select-selected-value {
  color: #fff;
  font-size: 16px !important;
}
.ivu-select-item-focus {
  background-color: @background-color;
}
.ivu-select-item-selected,
.ivu-select-item-selected:hover {
  color: #52c41a !important;
}
.ivu-select-item:hover {
  background-color: #1081b3 !important;
}
.ivu-date-picker-cells-cell-selected em,
.ivu-date-picker-cells-cell-selected:hover em {
  // color: #52c41a !important;
  color: #1081b2 !important;
}
.ivu-date-picker-cells-cell-range:before {
  background-color: #1081b2 !important;
  // background-color: #52c41a !important;
}
.ivu-btn {
  font-size: 14px !important;
}
</style>
